<template>
  <view class="chat-detail-page">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="doctor-info">
        <image
          class="doctor-avatar"
          :src="doctorInfo.avatar"
          mode="aspectFill"
        />
        <text class="doctor-name">{{ doctorInfo.name }}</text>
      </view>
      <view class="nav-actions">
        <view class="action-btn">
          <text class="phone-icon">📞</text>
        </view>
      </view>
    </view>

    <!-- 聊天消息区域 -->
    <scroll-view class="chat-messages" scroll-y="true" :scroll-top="scrollTop">
      <view class="message-list">
        <view
          class="message-item"
          v-for="(message, index) in messages"
          :key="index"
          :class="message.type"
        >
          <view class="message-avatar" v-if="message.type === 'doctor'">
            <image :src="doctorInfo.avatar" mode="aspectFill" />
          </view>
          <view class="message-content">
            <view class="message-bubble">
              <text class="message-text">{{ message.content }}</text>
            </view>
            <text class="message-time">{{ message.time }}</text>
          </view>
          <view class="message-avatar" v-if="message.type === 'user'">
            <view class="user-avatar">
              <text class="user-avatar-text">我</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部输入区域 -->
    <view class="chat-input-area">
      <view class="input-container">
        <view class="input-actions">
          <view class="action-icon">📷</view>
          <view class="action-icon">📎</view>
          <view class="action-icon">⋯</view>
        </view>
        <view class="input-box">
          <input
            class="message-input"
            v-model="inputMessage"
            placeholder="输入消息"
            @confirm="sendMessage"
          />
        </view>
        <view
          class="send-btn"
          @click="sendMessage"
          :class="{ active: inputMessage.trim() }"
        >
          <text class="send-icon">✈</text>
        </view>
      </view>
      <view class="input-options">
        <text class="option-text">适应屏幕</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      doctorInfo: {
        name: "医生姓名",
        avatar: "/static/tabbar/i3.png",
      },
      messages: [
        {
          type: "doctor",
          content: "您好! 我是XX科医生XX, 有什么可以帮到您的?",
          time: "10:00",
        },
        {
          type: "user",
          content: "我阳了",
          time: "10:05",
        },
        {
          type: "doctor",
          content: "你想听好消息还是坏消息?",
          time: "10:10",
        },
        {
          type: "user",
          content: "??????",
          time: "10:33",
        },
      ],
      inputMessage: "",
      scrollTop: 0,
    };
  },
  onLoad(options) {
    // 接收从consultation页面传递的医生信息
    if (options.doctorName) {
      this.doctorInfo.name = options.doctorName;
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    sendMessage() {
      if (!this.inputMessage.trim()) return;
      // 添加用户消息
      this.messages.push({
        type: "user",
        content: this.inputMessage,
        time: this.getCurrentTime(),
      });
      const userMessage = this.inputMessage;
      this.inputMessage = "";
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollTop = 9999;
      });
      // 模拟医生回复
      setTimeout(() => {
        this.messages.push({
          type: "doctor",
          content: `收到您的消息："${userMessage}"，我会尽快为您解答。`,
          time: this.getCurrentTime(),
        });
        this.$nextTick(() => {
          this.scrollTop = 9999;
        });
      }, 1000);
    },
    getCurrentTime() {
      const now = new Date();
      return `${now.getHours().toString().padStart(2, "0")}:${now
        .getMinutes()
        .toString()
        .padStart(2, "0")}`;
    },
  },
};
</script>

<style scoped>
.chat-detail-page {
  background: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.nav-header {
  display: flex;
  align-items: center;
  background: #32cd32;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.back-btn {
  margin-right: 20rpx;
}

.back-icon {
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
}

.doctor-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.doctor-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15px;
  border: 2px solid #fff;
}

.doctor-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
}

.nav-actions {
  display: flex;
  gap: 20px;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-icon {
  font-size: 32rpx;
  color: #fff;
}

/* 聊天消息区域 */
.chat-messages {
  flex: 1;
  padding: 20rpx;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.message-item {
  display: flex;
  align-items: flex-start;
  gap: 15rpx;
}

.message-item.doctor {
  justify-content: flex-start;
}

.message-item.user {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.message-avatar {
  width: 60rpx;
  height: 60rpx;
  flex-shrink: 0;
}

.message-avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #32cd32;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar-text {
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;
}

.message-content {
  max-width: 70%;
}

.message-bubble {
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 8rpx;
}

.message-item.user .message-bubble {
  background: #32cd32;
}

.message-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
}

.message-item.user .message-text {
  color: #fff;
}

.message-time {
  font-size: 22rpx;
  color: #999;
  text-align: center;
}

/* 底部输入区域 */
.chat-input-area {
  background: #fff;
  border-top: 1px solid #f0f0f0;
  padding: 20rpx 30rpx;
}

.input-container {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.input-actions {
  display: flex;
  gap: 20rpx;
}

.action-icon {
  font-size: 36rpx;
  color: #666;
}

.input-box {
  flex: 1;
  background: #f5f5f5;
  border-radius: 25rpx;
  padding: 15rpx 20rpx;
}

.message-input {
  width: 100%;
  font-size: 28rpx;
  color: #333;
  border: none;
  outline: none;
}

.send-btn {
  background: #ccc;
  border-radius: 25rpx;
  padding: 15rpx 20rpx;
  transition: all 0.3s;
}

.send-btn.active {
  background: #32cd32;
}

.send-icon {
  font-size: 26rpx;
  color: #fff;
  font-weight: 500;
}

.input-options {
  margin-top: 15rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.option-text {
  font-size: 24rpx;
  color: #666;
}
</style>
